<template>
	<div class="g-image" :style="{ backgroundColor: props.bgc, width: props.width, height: props.height }">
		<div class="g-image__container">
			<img
				v-bind="$attrs"
				ref="scene"
				:style="{ 'object-fit': props.fit }"
				class="g-image__container-img"
				:src="props.src"
				:title="props.title"
				:alt="props.alt"
				:onerror="onerror"
			/>
			<!-- <div
				class="g-image__container-drag"
				@mousewheel.prevent="scaleImage"
				@mousedown="dragMousedown"
				@mousemove="dragMousemove"
				@mouseup="dragMouseup"
			></div> -->
		</div>
	</div>
</template>

<script setup lang="ts" name="GImage">
import { onMounted, onUnmounted } from 'vue';
import { imageProps } from './image';
import panzoom from 'panzoom';
const props = defineProps(imageProps);

// let isDown = false;
// let startX = 0;
// let startY = 0;
// let translateX = 0;
// let translateY = 0;
// let walkX = 0;
// let walkY = 0;
// let count = 0;
// let minScale = props.minScale < -10 || props.minScale > 0 ? -10 : props.minScale;

// 鼠标按下
// const dragMousedown = (e: MouseEvent): void => {
// 	const drag = e.target as HTMLDivElement;
// 	if (count <= 0) {
// 		return;
// 	}
// 	isDown = true;
// 	startX = e.pageX - drag.offsetLeft;
// 	startY = e.pageY - drag.offsetTop;
// };

// 鼠标移动
// const dragMousemove = (e: any): void => {
// 	if (!isDown) {
// 		return;
// 	}
// 	e.preventDefault();
// 	const img = e.currentTarget.parentNode?.firstElementChild as HTMLImageElement;
// 	const drag = e.target as HTMLDivElement;
// 	const x = e.pageX - drag.offsetLeft;
// 	const y = e.pageY - drag.offsetTop;
// 	walkX = x - startX;
// 	walkY = y - startY;
// 	translateX += walkX;
// 	translateY += walkY;

// 	// 不能将图片拖出图片超出容器的距离
// 	const imgWidth = img.offsetWidth;
// 	const imgHeight = img.offsetHeight;
// 	const dragWidth = drag.offsetWidth;
// 	const dragHeight = drag.offsetHeight;
// 	const maxTranslateX = (imgWidth * (1 + count * 0.1) - dragWidth) / 2;
// 	const maxTranslateY = (imgHeight * (1 + count * 0.1) - dragHeight) / 2;
// 	translateX = translateX > maxTranslateX ? maxTranslateX : translateX;
// 	translateX = translateX < -maxTranslateX ? -maxTranslateX : translateX;
// 	translateY = translateY > maxTranslateY ? maxTranslateY : translateY;
// 	translateY = translateY < -maxTranslateY ? -maxTranslateY : translateY;

// 	const transform = `translate3d(${translateX}px, ${translateY}px, 0) scale3d(${1 + count * 0.1}, ${1 + count * 0.1}, 1)`;
// 	// 使用animate改变transform属性
// 	img.animate([{ transform }], {
// 		duration: 500,
// 		fill: 'forwards'
// 	});
// 	startX = x;
// 	startY = y;
// };

// 鼠标抬起
// const dragMouseup = (): void => {
// 	isDown = false;
// };
const scene = ref();
const instance = ref();
onMounted(() => {
	// window.addEventListener('mouseup', dragMouseup);
	instance.value = panzoom(scene.value, {
		bounds: true, //开启不超出屏幕
		boundsPadding: 0.1, // 设置拖动不超过的pading
		maxZoom: 5, //最大放大倍数
		minZoom: 0.5 //最小缩小倍数
	});
});
onUnmounted(() => {
	instance.value.dispose();
});
// 通过鼠标滚轮缩放图片
// const scaleImage = (e: any): void => {
// 	e.preventDefault();
// 	const img = e.target.parentNode?.firstElementChild as HTMLImageElement;
// 	const drag = e.target as HTMLDivElement;
// 	if (!img || !props.scalable) {
// 		return;
// 	}
// 	const transformDefault = `scale3d(${1 + count * 0.1}, ${1 + count * 0.1}, 1)`;
// 	img.animate([{ transform: transformDefault }], {
// 		duration: 500,
// 		fill: 'forwards'
// 	});
// 	if (e.deltaY <= 0) {
// 		count = count >= props.maxScale ? props.maxScale : ++count;
// 	} else {
// 		count = count <= minScale ? minScale : --count;
// 	}
// 	count <= 0 ? (drag.style.cursor = 'pointer') : (drag.style.cursor = 'move');
// 	props.onScale && props.onScale(count);
// 	translateX = 0;
// 	translateY = 0;

// 	const transform = `scale3d(${1 + count * 0.1}, ${1 + count * 0.1}, 1)`;
// 	img.animate([{ transform }], {
// 		duration: 500,
// 		fill: 'forwards'
// 	});
// };

// 图片加载出错
const onerror = (e: Event): void => {
	const target = e.target as any;
	target.src = props.error;
	target.onerror = null;
};
</script>

<style lang="less" scoped>
.g-image {
	background: transparent;
	user-select: none;
	-webkit-user-drag: none;

	.g-image__container {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;

		.g-image__container-img {
			position: absolute;
			width: 100%;
			height: 100%;
			cursor: move;
			user-select: none;
			object-fit: contain;
			-webkit-user-drag: none;
		}

		.g-image__container-drag {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: pointer;
			user-select: none;
			-webkit-user-drag: none;
		}
	}
}
</style>
